@charset "utf-8";
@import "reset.scss";
@import "common.scss";
@import"classifyH.scss";

.wrap {
    main {
        margin-bottom: 300px;
        .searchCon {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        .search {
            position: relative;
            padding: getvw(36) 0;
            input {
                width: getvw(266);
                height: getvw(51);
                border-radius: getvw(10);
                border: 2px solid $orangeC;
            }
            i {
                font-size: getvw(30);
                color: $orangeC;
                position: absolute;
                right: getvw(10);
                top: 50%;
                transform: translateY(-50%);
            }
        }
        >p {
            width: 100vw;
            font-size: getvw(26);
            font-weight: 700;
            text-align: center;
            margin-bottom: getvw(14);
        }
        .keyWords {
            padding: 0 getvw(113);
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            p {
                width: getvw(125);
                height: getvw(64);
                margin: getvw(2);
                background-color:#dcdcdc;
                font-size: getvw(20);
                color: #898989;
                text-align: center;
                line-height: getvw(64);
            }
        }
        }

        .hot {
        padding: 0 getvw(21);
        .titleH {
            @include titleH();
            margin-bottom: getvw(38);
        }
        .picList {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: getvw(61);
            >div:nth-of-type(1) {
                img {
                    width: getvw(280);
                    height: getvw(352);
                }
            }
            >div:nth-of-type(2) {
                display: flex;
                flex-direction: column;
                // justify-content: center;
                >div:nth-of-type(1) {
                    img {
                        width: getvw(420);
                        height: getvw(147);
                    }
                }
                >div:nth-of-type(2) {
                    display: flex;
                    justify-content: space-between;
                    div:nth-of-type(1) {
                        img {
                            width: getvw(197);
                            height: getvw(197);
                        }
                    }
                    div:nth-of-type(2) {
                        img {
                            width: getvw(222);
                            height: getvw(197);
                        }
                    }
                }
            }
        }
        }

        .recommend {
            padding: 0 getvw(21);
            .titleH {
                @include titleH();
                margin-bottom: getvw(38);
            }
        }
        .picList {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            div {
                img {
                    width: getvw(228);
                    height: getvw(200);
                }
            }
        }
    }
}